<template>
  <div
      class="process-panel__container"
      :style="{ width: `${width}px` }"
  >
    <a-collapse
        v-model="activeTab"
        expand-icon-position="right"
    >
      <a-collapse-panel key="base">
        <div slot="header">
          <a-icon
              type="info-circle"

          />常规
        </div>
        <p-base-info
            :id-edit-disabled="idEditDisabled"
            :business-object="elementBusinessObject"
            :type="elementType"
        />
      </a-collapse-panel>
      <a-collapse-panel
          v-if="elementType === 'Process'"
          key="message"
          name="condition"
      >
        <div slot="header">
          <a-icon
              type="message"
          />消息与信号
        </div>
        <p-signal-and-massage />
      </a-collapse-panel>
      <a-collapse-panel
          v-if="conditionFormVisible"
          key="condition"
          name="condition"
      >
        <div slot="header">
          <i class="a-icon-s-promotion" />流转条件
        </div>
        <p-flow-condition
            :business-object="elementBusinessObject"
            :type="elementType"
        />
      </a-collapse-panel>
      <a-collapse-panel
          v-if="formVisible"
          key="form"
          name="condition"
      >
        <div slot="header">
          <a-icon type="form"/>表单
        </div>
        <p-form
            :id="elementId"
            :type="elementType"
        />
      </a-collapse-panel>
      <a-collapse-panel
          v-if="elementType.indexOf('Task') !== -1"
          key="task"
          name="task"
      >
        <div slot="header">
          <a-icon type="" />任务
        </div>
        <p-task
            :id="elementId"
            :type="elementType"
        />
      </a-collapse-panel>
      <a-collapse-panel
          v-if="elementType.indexOf('Task') !== -1"
          key="multiInstance"
          name="multiInstance"
      >
        <div slot="header">
          <i class="a-icon-s-help" />多实例
        </div>
        <p-multi-instance
            :business-object="elementBusinessObject"
            :type="elementType"
        />
      </a-collapse-panel>
      <a-collapse-panel
          key="listeners"
          name="listeners"
      >
        <div slot="header">
          <a-icon
              type="bell"
          />监听器
        </div>
        <p-listeners
            :id="elementId"
            :type="elementType"
        />
      </a-collapse-panel>
      <a-collapse-panel
          key="extensions"
          name="extensions"
      >
        <div slot="header">
          <a-icon
              type="plus-circle"
          />扩展属性
        </div>
        <p-properties
            :id="elementId"
            :type="elementType"
        />
      </a-collapse-panel>
      <a-collapse-panel
          key="other"
          name="other"
      >
        <div slot="header">
          <a-icon
              type="exclamation-circle"
          />其他
        </div>
        <p-other-config :id="elementId" />
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>
<script>
import PBaseInfo from './base/BaseInfo'
import POtherConfig from './other/OtherConfig'
import PTask from './task/Task'
import PMultiInstance from './multi-instance/MultiInstance'
import PFlowCondition from './flow-condition/FlowCondition'
import PSignalAndMassage from './signal-message/SignalAndMessage'
import PListeners from './listeners/Listeners'
import PProperties from './properties/Properties'
import PForm from './form/Form'
/**
 * 侧边栏
 * @Author MiyueFE
 * @Home https://github.com/miyuesc
 * @Date 2021年3月31日18:57:51
 */
export default {
  name: 'ProcessPanel',
  components: {
    PForm,
    PProperties,
    PListeners,
    PSignalAndMassage,
    PFlowCondition,
    PMultiInstance,
    PTask,
    POtherConfig,
    PBaseInfo
  },
  provide() {
    return {
      prefix: this.prefix,
      width: this.width
    }
  },
  props: {
    bpmnModeler: Object,
    prefix: {
      type: String,
      default: 'camunda'
    },
    width: {
      type: Number,
      default: 480
    },
    idEditDisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeTab: 'base',
      elementId: '',
      elementType: '',
      elementBusinessObject: {}, // 元素 businessObject 镜像，提供给需要做判断的组件使用
      conditionFormVisible: false, // 流转条件设置
      formVisible: false // 表单配置
    }
  },
  watch: {
    elementId: {
      handler() {
        this.activeTab = 'base'
      }
    }
  },
  mounted() {
    this.initModels()
  },
  methods: {
    initModels() {
      // 初始化 modeler 以及其他 moddle
      if (!this.bpmnModeler) {
        // 避免加载时 流程图 并未加载完成
        this.timer = setTimeout(() => this.initModels(), 10)
        return
      }
      if (this.timer) clearTimeout(this.timer)
      window.bpmnInstances = {
        modeler: this.bpmnModeler,
        modeling: this.bpmnModeler.get('modeling'),
        moddle: this.bpmnModeler.get('moddle'),
        eventBus: this.bpmnModeler.get('eventBus'),
        bpmnFactory: this.bpmnModeler.get('bpmnFactory'),
        elementRegistry: this.bpmnModeler.get('elementRegistry'),
        replace: this.bpmnModeler.get('replace'),
        selection: this.bpmnModeler.get('selection')
      }
      this.getActiveElement()
    },
    getActiveElement() {
      // 初始第一个选中元素 bpmn:Process
      this.processElement = window.bpmnInstances.elementRegistry.find(
        (el) => el.type === 'bpmn:Process'
      )
      this.initFormOnChanged(this.processElement)
      // 监听选择事件，修改当前激活的元素以及表单
      this.bpmnModeler.on('selection.changed', ({ newSelection }) => {
        if (newSelection && newSelection.length) {
          const element = newSelection[0]
          this.initFormOnChanged(element)
        } else {
          this.initFormOnChanged(this.processElement)
        }
      })
      this.bpmnModeler.on('element.changed', ({ element }) => {
        // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
        if (element && element.id === this.elementId) {
          this.initFormOnChanged(element)
        }
      })
    },
    // 初始化数据
    initFormOnChanged(element) {
      console.log(`
        ----------
select element changed:
          id:  ${element.id}
        type:  ${element.businessObject.$type}
        ----------
        `)
      console.log('businessObject: ', element.businessObject)
      window.bpmnInstances.bpmnElement = element
      this.bpmnElement = element
      this.elementId = element.id
      this.elementType = element.type.split(':')[1]
      this.elementBusinessObject = JSON.parse(
        JSON.stringify(element.businessObject)
      )
      this.conditionFormVisible = !!(
        this.elementType === 'SequenceFlow' &&
        element.source &&
        element.source.type.indexOf('StartEvent') === -1
      )
      this.formVisible =
        this.elementType === 'UserTask' || this.elementType === 'StartEvent'
    },
    beforeDestroy() {
      window.bpmnInstances = null
    }
  }
}
</script>
